<template>
  <view class="goods-list">
    <!-- 商品 item -->
      <view  v-for="(item,i) in goodsList" :key="i" @click="gotoDetail(item)">
          <my-goods :goods="item"></my-goods>
      </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 请求参数对象
      queryObj: {
        query: '', // 关键词查询
        cid: '', // 分类查询
        pagenum: 1, // 请求页码
        pagesize: 10 // 分页大小
      },
      goodsList: [], // 商品列表
      total: 0, // 当前查询条件商品的总数量
      isloading: false, // 节流阀标志位 
    }
  },

  onLoad(options) {
    // 初始化查询参数
    this.queryObj.query = options.query || ''
    this.queryObj.cid = options.cid || ''

    // 调用获取商品列表的方法
    this.getGoodsList()
  },

  methods: {
    // 获取商品列表
    async getGoodsList(cb) {
      // 发起请求时 设置 节流标志位 为 true
      this.isloading = true
      const { data: res } = await uni.$http.get('/goods/search', this.queryObj)
      // 请求完毕 设置 节流标志位 为 false
      this.isloading = false
      // 停止下拉刷新
      cb && cb()
      // 响应异常判断
      if (res.meta.status !== 200) return uni.$showMsg()
      // 赋值到 data
      this.goodsList = [...this.goodsList, ...res.message.goods]
      this.total = res.message.total
    },
    
    // 点击商品item跳转到商品详情页
    gotoDetail (item) {
      uni.navigateTo({
        url: `../goods-detail/goods-detail?goods_id=${item.goods_id}`
      })
    }
  },
  
  // 下拉到底事件处理函数
   onReachBottom() {
     // 判断到底时 数据是否加载完毕
     if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) {
       return uni.$showMsg('数据加载完毕！')
     }
     // 数据没有返回 再次触底后直接 return
     if (this.isloading) return
     // 改变请求参数
     this.queryObj.pagenum += 1
     // 发起请求
     this.getGoodsList()
   },
   
   // 页面事件处理函数 => 下拉刷新
   onPullDownRefresh() {
     // 重置请求数据
     this.queryObj.pagenum = 1
     this.queryObj.pagesize = 10
     this.goodsList = []
     this.total = 0
     this.isloading = false
     // 再次请求数据
     this.getGoodsList(() => uni.stopPullDownRefresh())
   }
}
</script>

<style lang="scss">
.goods-list {
  border: 1rpx solid #efefef;
  margin: 0 8rpx;
}
</style>
